<template>
  <div class="hello">
    <van-nav-bar
      title="个人中心"
      right-text="编辑"
      left-arrow
      @click-right="edit"
      class="nav-bar"
    />
    <h2>我的</h2>
    <img :src="getInfo.avaUrl" alt="" />
    <p>{{ getInfo.name }}</p>

    <van-field v-model="getInfo.name" readonly />
    <van-field v-model="getInfo.phone" readonly />
    <mt-button size="large" type="danger" @click="logount()">
      退出登录
    </mt-button>
  </div>
</template>

<script>
export default {
  name: "Wode",
  data() {
    return {};
  },
  methods: {
    //编辑页面
    edit() {
      this.$router.push("/edit");
    },
    //退出
    logount() {
      var token = sessionStorage.getItem("token");
      console.log(token);
      var str = `token=${token}`;
      this.axios
        .post("http://123.57.130.65:8080/user/logoutser/logout", str)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            //提示退出成功
            sessionStorage.removeItem("token");
            this.$router.push("/login");
          } else {
            //提示退出失败
          }
        });
    },
  },
  mounted() {},
  computed: {
    getInfo() {
      return this.$store.state.info;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  text-align: center;
}
.nav-bar{
  background-color: aquamarine;
}
</style>
